<template>
  <div
    class="modify"
    :style="{ height: clientHeight + 'px' }"
    ref="homePage"
  >
    <!-- <img src="http://o6wndwjxn.qnssl.com/e34a4201901121634127106.png" /> -->
    <!-- <div class="posterimg">
         <img src="http://o6wndwjxn.qnssl.com/e34a4201901121634127106.png" />
       </div>
       <div class="postertxt">
          加入知运，成为比上一秒更优秀的自己
       </div> -->
    <img
      v-if="image === ''"
      src="./bg.png"
      id="tulip"
    >
    <img
      v-if="image === ''"
      id="#0"
      class="ooooo"
      :src="erweima"
      crossOrigin="anonymous"
    >
    <img  v-if="image === ''" :src="user" class="avatar"/>
    <img
      :src="image"
      class="hecheng123"
    >
    <!-- <canvas id="myCanvas"></canvas> -->
  </div>
</template>

<script>
import { pushErweima } from '@/api/assemble'
import { mapState } from 'vuex'
import html2canvas from 'html2canvas'
export default {
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      user: '',
      erweima: '',
      image: '',
      WinWidth: '',
      WinHeight: '',
      showPositionValue: false, // 是否显示提示
      loading: true,
      clientHeight: '',
      change: true,
      bendiimgurl: '',
      getBarWidth: function (index) {
        return 30 + 'px'
      }
    }
  },
  methods: {
    geterwei () {
      let obj = {
        curriculum_id: 0,
        member_id: this.user_id
      }
      pushErweima(obj).then(res => {
        if (res.data.code === 200) {
          this.erweima = res.data.data.data
          let cover = res.data.data.user_list.cover
          let stb = cover.replace('http://thirdwx.qlogo.cn', 'http://web.zhiyunzaixian.com/wechat_image')
          this.user = stb
          let arr = res.data.data.data.split('?')
          let str = arr[0]
          str = str.replace('https://mp.weixin.qq.com', 'http://web.zhiyunzaixian.com/wechat_qrcode')
          this.erweima = `${str}?${arr[1]}`
          // console.log(123321)
          // console.log(this.erweima)
          // console.log(123321)
          // console.log(this.erweima)
          // let erImg = new Image()
          // erImg.src = this.erweima
          // erImg.crossOrigin = 'anonymous'
          // document.querySelector('.modify').appendChild(erImg)
          // erImg.onload = () => {
          if (this.erweima !== '' && this.user !== '') {
            html2canvas(document.querySelector('.modify'), {
              allowTaint: true
            }).then((canvas) => {
              // document.querySelector('.modify').appendChild(canvas)
              this.image = canvas.toDataURL('image/jpeg')
              // console.log(canvas.toDataURL('image/png'))
              this.$store.commit('updateLoadingStatus', { isLoading: false })
            })
          }
          // }
        }
      })
    }
    // drawImage () {
    //   this.WinHeight = document.documentElement.clientHeight
    //   this.WinWidth = document.documentElement.clientWidth
    //   let img = document.getElementById('tulip')
    //   let c = document.getElementById('myCanvas')
    //   let ctx = c.getContext('2d')
    //   // 获取窗口可见高度
    //   this.$nextTick(() => {
    //     let nImg = new Image()
    //     nImg.src = this.erweima
    //     console.log(nImg)
    //     nImg.crossOrigin = 'anonymous'
    //     nImg.onload = () => {
    //       let erweima = nImg
    //       img.width = this.WinWidth * 2 * 0.692
    //       c.width = this.WinWidth * 2
    //       c.height = img.height * 2
    //       // console.log(img.width, img.height)
    //       // console.log(img.width / img.height)
    //       ctx.drawImage(img, 0, 0, this.WinWidth * 2, img.height * 2)
    //       console.log('background')
    //       let erweimaw = this.WinWidth * 2 * 0.079
    //       let erweimah = img.height * 2 * 0.842
    //       // console.log(parseInt(erweimah))
    //       ctx.drawImage(erweima, parseInt(erweimaw), parseInt(erweimah), 0.187 * this.WinWidth * 2, 0.187 * 2 * this.WinWidth)
    //       //  100, this.WinHeight, 0, 0, this.WinWidth, this.WinHeight
    //       console.log('er')
    //       this.image = c.toDataURL('image/jpeg')
    //       console.log('sheng')
    //       // var finalResult = ctx.toDataURL('image/png')
    //     }
    //   })
    // }
  },
  created () {
    this.$store.commit('updateLoadingStatus', { isLoading: false })
  },
  mounted () {
    this.geterwei()
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  }
}
</script>

<style lang="less" scoped>
.hecheng{
  position: fixed;
  top: 0;
}
.ooooo{
  position: absolute;
  top: calc(100vh * 932.5 / 1206);
  left: calc(100vw * 428.5 / 750);
  width: calc(100vw * 140 / 750);
  padding: 4px;
  border: solid 1px #fff;
  border-radius: 9%;
}
.avatar{
  position: absolute;
  top: calc(100vh * 932.5 / 1206);
  left: calc(100% * 182 / 750);
  width:  calc(100vw * 138 / 750);
  height: calc(100vw * 138 / 750);
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
  border: solid 1px #fff;
}
#tulip{
  width: 100%;
  height: 100%;
  position: relative;
}
#myCanvas {
  // position: fixed;
  // top: 0;
  // left: 0;
}
.hecheng {
  // position: fixed;
  // top: 0;
  // left: 0;
  // z-index: 99999;
}
.modify {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  box-sizing: border-box;
  font-size: 14px;
  color: #1a1a1a;
  width: 100%;
}

.postertxt {
  font-size: 14px;
  color: #333333;
  text-align: center;
  line-height: 30px;
}
</style>
